<template>
	<!-- 发现页 -->
	<div>
		<van-pull-refresh
			v-model="isLoading"
			loading-text="正在刷新"
			type="spinner"
			loosing-text="下拉刷新"
			success-text="刷新成功"
			@refresh="refresh"
			>
				<!-- 触底加载 -->
				<van-list class="list" v-model="loading" :finished="finished" @load="loadMore" offset="10">
					<!-- 一条新闻 -->
					<div v-show="news.length">
						<news-item v-for="item in news" :key="item.nid" :news="item"/>
					</div>
					<!-- 拍卖往期结果 -->
					<div v-show="sellerlist.length">
						<sale-result-item v-for="item,i in sellerlist" :key="i" :data="item" />
					</div>
					<!-- 拍卖日程 -->
					<div v-show="!news.length && !sellerlist.length">
						<img v-lazy="'/img/DaySale/DaySale.jpg'" style="max-width:100%" src="/img/DaySale/DaySale.jpg">
					</div>
						<van-divider class="divider" v-show="finished">我是有底线的~</van-divider>
				</van-list>
		</van-pull-refresh>
	</div>
</template>

<script>
import NewsItem from '@/components/NewsItem.vue'
import SaleResultItem from '@/components/SaleResultItem.vue'
import { Toast } from 'vant';
	export default {
		components:{ NewsItem, SaleResultItem },
		data() {
			return {
				news:[], //存放新闻列表
				sellerlist:[], //拍卖结果列表
				family:this.$route.query.family, //当前类别id
				isLoading:false, //是否在加载数据
				finished:false, //数据是否已全部加载
				loading:false, //是否触底加载
				newpno:1, //新闻列表当前页
				newCount:1, //新闻列表总页数
				resultpno:1 //往期拍卖结果
			}
		},
		methods:{
			// 加载新闻数据
			loadData(pno,fid){
				Toast.loading({
					message: '加载中...',
					forbidClick: true,
					duration:0,
					loadingType: 'spinner',
				})
				const url=`api/news/list?pno=${pno}&fid=${fid}`
				return new Promise((resolve,reject)=>{
					this.axios.get(url)
					.then(res=>{
						resolve(res.data)
						Toast.clear()
					})
					.catch(err => reject(err))
				})
			},
			// 加载往期拍卖结果
			loadResult(pno){
				Toast.loading({
					message: '加载中...',
					forbidClick: true,
					duration:0,
					loadingType: 'spinner'
				})
				const url=`api/auction/list?pno=${pno}`
				return new Promise((resolve,reject)=>{
					this.axios.get(url)
					.then(res =>{ 
						resolve(res.data)
						Toast.clear()
					})
					.catch(err => reject(err))
				}) 
			},
			// 下拉刷新触发
			refresh(){
				this.newpno=1
				this.resultpno=1
				this.loading=false
				this.finished=false
				let family = this.$route.query.family
				// 加载更新新闻列表数据
				if(family == 1 || family == 2){
					// 加载新的数据 更新缓存
					this.loadData(1,family).then(res=> {
						// 更新数据
						this.news=res.data
						// 更新缓存
						sessionStorage.setItem(family,JSON.stringify(res.data))
						this.isLoading=false
					})
				}else if(family == 'result'){
					// 更新拍卖结果数据
					this.loadResult(1).then(res => {
						this.sellerlist=res.result
						// 将新数据缓存
						sessionStorage.setItem('sellerlist',JSON.stringify(res.result))
						this.isLoading=false
					})
					// 拍卖日程
				}else {
					this.finished=true
					this.isLoading=false
				}
			},
			// 加载更多
			loadMore(){
				// 新闻数据
				if(this.family == 1 || this.family == 2){
					this.newpno++
					this.loadData(this.newpno,this.family)
					.then(res => {
						this.news.push(...res.data)
						this.loading=false
						if(res.pno == res.Pagecount) {
							this.finished=true
						}
					})
					// 拍卖结果
				}else if(this.family == 'result'){
					this.resultpno++
					this.loadResult(this.resultpno).then(res => {
						this.sellerlist.push(...res.result)
						if(res.pno==res.pageCount) this.finished=true
						this.loading=false
					})
				}else {
					this.finished=true
				}
			}
		},
		watch:{
			$route(newVal){
				// 切换顶部条 滚动条回顶部
				document.documentElement.scrollTop=document.body.scrollTop=0
				this.finished=false
				this.loading=false
				this.newpno=1
				this.resultpno=1
				this.family = newVal.query.family
				// 新闻数据
				if(newVal.query.family == 1 || newVal.query.family == 2){
					this.sellerlist=[] //存放拍卖结果的数组为空，不显示
					// 读取缓存数据
					let data=JSON.parse(sessionStorage.getItem(newVal.query.family))
					// 如果缓存有数据 则更新数据
					if(data){
						this.news=data
					} else{
						// 缓存没有数据 请求缓存
						this.loadData(1,newVal.query.family).then(res=>{
							// 缓存新闻列表的数据
							sessionStorage.setItem(res.fid,JSON.stringify(res.data))
							// 更新新闻列表
							this.news=res.data
						})
					}
				}else if(newVal.query.family == 'result'){
					this.news=[] //让新闻数组为空数组不显示
					let sellerlist=JSON.parse(sessionStorage.getItem('sellerlist'))
					// 缓存中有数据
					if(sellerlist) {
						this.sellerlist=sellerlist
					}else {
						// 加载往期拍卖结果
						this.loadResult(1).then(res => {
							// 缓存数据
							sessionStorage.setItem('sellerlist',JSON.stringify(res.result))
							this.sellerlist=res.result
						})
					}
				// 拍卖日程
				}else {
					this.news=[] //新闻列表为空  不显示
					this.sellerlist=[]  //拍卖结果为空 不显示
				}
			}
		},
		mounted(){
			// 如果传递的参数是1或者是2 用户点的是新闻
			// 新闻数据
			if(this.family == 1 || this.family == 2){
				let data=JSON.parse(sessionStorage.getItem(this.family))
				// 如果本地有数据 直接保存到data变量
				if(data) {
					this.news=data
				}else{
					// 加载新闻数据
					this.loadData(1,this.family).then(res=>{
						// 将请求的新闻列表数据缓存
						sessionStorage.setItem(res.fid,JSON.stringify(res.data))
						this.news=res.data
					})
				}
			// 拍卖结果
			}else {
				//先读缓存 ，如果有数据就直接赋值
				let sellerlist=JSON.parse(sessionStorage.getItem('sellerlist'))
				if(sellerlist){
					this.sellerlist=sellerlist
				}else{
					this.loadResult(1).then(res => {
						// 缓存数据
						sessionStorage.setItem('sellerlist',JSON.stringify(res.result))
						this.sellerlist=res.result
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
::v-deep .divider {
	margin: 0.315em 0;
}
</style>